<template>
	<div 
	class="mine-shopsettle-detail-wrap" >
		<van-nav-bar
		  title="门店详情"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		
		<div 
		v-if="shopInfo"
		class="shop-info" >
			<div class="shop-info-name" >{{ shopInfo.name }}</div>
			<div class="shop-info-li" >
				<img class="shop-info-li-icon" src="../../../images/mine/icon_detail_address.png" >
				<div class="shop-info-li-text" >
					{{ shopInfo.region_name }}
				</div>
			</div>
			<div class="shop-info-li" >
				<img class="shop-info-li-icon" src="../../../images/mine/icon_detail_time.png" >
				<div class="shop-info-li-text" >
					{{ shopInfo.business_time }}
				</div>
			</div>
			<div class="shop-info-li" >
				<img class="shop-info-li-icon" src="../../../images/mine/icon_detail_tp.png" >
				<div class="shop-info-li-text" >
					{{ shopInfo.cate_name }}
				</div>
			</div>
			<div class="shop-info-li" >
				<img class="shop-info-li-icon" src="../../../images/mine/icon_detail_mdrl.png" >
				<div class="shop-info-li-text" >
					{{ shopInfo.subsidy_config_name }}
				</div>
			</div>
			
			<div 
			@click="handleToEditShop"
			class="edit-btn active-btn" >
				<div class="edit-text" >编辑店铺</div>
				<img class="edit-arrow" src="../../../images/mine/icon_detail_more.png" >
			</div>
		</div>
		
		<div class="income-box" >
			<div class="income-total" >
				<div class="income-total-label" >今日收入（元）</div>
				<div class="income-total-val" >{{ shopInfo.income_today }}</div>
			</div>
			<div class="income-list" >
				<div class="income-li" >
					<div class="income-li-val" >{{ shopInfo.income_yesterday }}</div>
					<div class="income-li-label" >昨日收入</div>
				</div>
				<div class="income-li month-income" >
					<div class="income-li-val" >{{ shopInfo.income_month }}</div>
					<div class="income-li-label" >本月收入</div>
				</div>
				<div class="income-li" >
					<div class="income-li-val" >{{ shopInfo.income_total }}</div>
					<div class="income-li-label" >历史收入</div>
				</div>
			</div>
		</div>
		
		<div class="business-box" >
			<div class="business-box-label" >营业状态</div>
			<van-switch 
			active-color="#67C23A" 
			inactive-color="#DCDFE6" 
			size="20"
			v-model="checked" 
			@change="switchChange"
			/>
		</div>
		
		<!-- 菜单 -->
		<div class="menu-ul" >
			<!-- <div class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-1.png" >
				<div class="menu-li-name"  >余额明细</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div> -->
			<!-- <div class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-2.png" >
				<div class="menu-li-name"  >打款明细</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div> -->
			<div 
			@click="handleToQr"
			class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-3.png" >
				<div class="menu-li-name"  >收款二维码</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div>
			<div 
			@click="handleToPayOrder"
			class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-4.png" >
				<div class="menu-li-name"  >扫码支付订单</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div>
			<div 
			@click="handleVoiceDevice"
			class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/pofit-icon-7.png" >
				<div class="menu-li-name"  >收款播报设置</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div>
			<div 
			@click="handleToPay"
			class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/pofit-icon-8.png" >
				<div class="menu-li-name"  >线下收款码绑定</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div>
			<div
			@click="handleToOnline"
			 class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-5.png" >
				<div class="menu-li-name"  >在线买单订单</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div>
			<div 
			@click="handleToSubsidy"
			class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-6.png" >
				<div class="menu-li-name"  >查看排队</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div>
			<!-- <div class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-7.png" >
				<div class="menu-li-name"  >后台地址</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div> -->
		</div>
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id: this.$route.query.id,
				shopInfo: null,
				checked: false
			}
		},
		created() {
			// 门店详情
			this.getShopDetail();
			
			
			
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			// 编辑店铺
			handleToEditShop() {
				this.$router.push({
					name: 'shopSettleShopEdit',
					query: {
						id: this.id
					}
				})
			},
			getShopDetail() {
				this.$http.get(`/store/manage/${this.id}/info`)
					.then(res => {
						
						this.shopInfo = res.data;
						this.checked =  res.data.business_status == 1;
					})
			},
			switchChange(bol) {
				this.$http.post(`/store/manage/${this.id}/toggle_business_status`)
					.then(res => {
						
						this.$toast.success('操作成功');
					})
			},
			// 收款二维码
			handleToQr() {
				this.$router.push(`/authSuccess?id=${this.id }`)
			},
			// 扫码支付订单
			handleToPayOrder() {
				this.$router.push({
					name: 'shopSettlePayOrder',
					query: {
						id: this.id
					}
				})
			},
			// 收款播报设置
			handleVoiceDevice(){
				this.$router.push({
					name: 'shopSettleVoiceDevice',
					query: {
						id: this.id
					}
				})
			},
			//线下收款码绑定
			handleToPay(){
				this.$router.push({
					name: 'payCodeList',
					query: {
						id: this.id
					}
				})
			},
			// 线上支付
			handleToOnline() {
				this.$router.push({
					name: 'shopSettleOnlinePay',
					query: {
						id: this.id
					}
				})
			},
			// 排队记录
			handleToSubsidy() {
				this.$router.push({
					name: 'shopSettleSubsidyList',
					query: {
						id: this.id
					}
				})
			}
		}
	}
</script>

<style lang="scss" >
	.mine-shopsettle-detail-wrap{
		min-height: 100vh;
		padding-top: 58px;
		background-color: #f5f5f5;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		
		.shop-info{
			position: relative;
			width: 7.02rem;
			min-height: 2.74rem;
			margin: auto;
			margin-bottom: 0.16rem;
			padding: 0.28rem 0.32rem 0.34rem;
			border-radius: 0.16rem;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.edit-btn{
				position: absolute;
				bottom: 1.12rem;
				right: 0.32rem;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.6rem;
				height: 0.52rem;
				border-radius: 0.26rem;
				background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
				.edit-text{
					margin-left: 0.24rem;
					font-weight: 400;
					font-size: 0.24rem;
					color: #FFFFFF;
				}
				.edit-arrow{
					width: 0.28rem;
					height: 0.28rem;
				}
			}
			.shop-info-name{
				margin-left: 0.04rem;
				margin-bottom: 0.14rem;
				line-height: 0.4rem;
				font-weight: 500;
				font-size: 0.28rem;
				color: #333333;
			}
			.shop-info-li{
				display: flex;
				margin-bottom: 0.08rem;
				&:last-child{
					margin-bottom: 0;
				}
				.shop-info-li-icon{
					width: 0.32rem;
					height: 0.32rem;
					margin-top: 0.02rem;
					margin-right: 0.12rem;
				}
				.shop-info-li-text{
					font-size: 0.24rem;
					font-weight: 400;
					line-height: 0.36rem;
					color: #666666;
				}
			}
		}
		
		.business-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 7.02rem;
			height: 0.96rem;
			padding: 0 0.36rem;
			margin: auto;
			margin-bottom: 0.2rem;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 0.16rem;
			.business-box-label{
				font-weight: 500;
				font-size: 0.28rem;
				color: #333333;
			}
		}
		
		.menu-ul{
			width: 7.02rem;
			margin: auto;
			padding: 0.08rem 0;
			background-color: #FFFFFF;
			border-radius: 0.16rem;
			box-sizing: border-box;
			.menu-li{
				position: relative;
				display: flex;
				align-items: center;
				height: 0.8rem;
				padding: 0 0.32rem;
				margin-bottom: 0.16rem;
				&:last-child{
					margin-bottom: 0;
				}
				.menu-li-icon{
					width: 0.48rem;
					height: 0.48rem;
				}
				.menu-li-name{
					margin-left: 0.2rem;
					font-weight: 400;
					font-size: 0.28rem;
					color: #333333;
				}
				.menu-li-arrow{
					position: absolute;
					right: 0.32rem;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 0.32rem;
					height: 0.32rem;
				}
			}
		}
		
		.income-box{
			width: 7.02rem;
			height: 2.3rem;
			margin: auto;
			margin-bottom: 0.24rem;
			background: url('../../../images/mine/mine-shop-detail-bg.png') no-repeat center;
			background-size: cover;
			.income-total{
				display: flex;
				color: #FFD88B;
				margin-left: 0.36rem;
				.income-total-label{
					height: 0.4rem;
					margin-top: 0.42rem;
					margin-right: 0.08rem;
					line-height: 0.4rem;
					font-size: 0.28rem;
					font-weight: 400;
				}
				.income-total-val{
					height: 0.6rem;
					margin-top: 0.28rem;
					line-height: 0.6rem;
					font-size: 0.44rem;
					font-weight: 600;
				}
			}
			.income-list{
				display: flex;
				justify-content: space-between;
				margin-top: 0.28rem;
				color: #D9D9D9;
				.income-li{
					display: flex;
					align-items: center;
					flex-direction: column;
					flex: 1;
					.income-li-val{
						height: 0.4rem;
						margin-bottom: 0.08rem;
						line-height: 0.4rem;
						font-size: 0.28rem;
					}
					.income-li-label{
						height: 0.34rem;
						line-height: 0.34rem;
						font-size: 0.24rem;
					}
				}
				.month-income{
					position: relative;
					&::before{
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						content: '';
						width: 0.02rem;
						height: 0.5rem;
						background: rgba(255,255,255,0.2);
					}
					&::after{
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						content: '';
						width: 0.02rem;
						height: 0.5rem;
						background: rgba(255,255,255,0.2);
					}
				}
			}
		}
	}
</style>
